<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <title>创建问题</title>

    <!-- 引入vue -->
    <script src="../plugins/vue/vue.js" type="text/javascript" charset="utf-8"></script>
    <!-- 引用element-ui -->
    <link rel="stylesheet" href="../plugins/element-ui/theme-chalk/index.css">
    <link rel="stylesheet" href="../css/index.css">
    <script src="../plugins/element-ui/index.js" charset="utf-8"></script>
    <!-- 引用axios -->
    <script src="../plugins/axios/axios.min.js" charset="utf-8"></script>
</head>
<body>
<style>


</style>
<div id="app">
    <el-container style="height: 500px; border: 1px solid #eee">
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
            <el-menu
                    :default-active="activeIndex"
                    @select = "getIndex">
                <el-menu-item index="1">
                    <i class="el-icon-chat-line-square"></i>
                    <span slot="title">单项填空</span>
                </el-menu-item>
                <el-menu-item index="2">
                    <i class="el-icon-menu"></i>
                    <span slot="title">多项填空</span>
                </el-menu-item>
                <el-menu-item index="3">
                    <i class="el-icon-s-promotion"></i>
                    <span slot="title">矩阵填空</span>
                </el-menu-item>
                <el-menu-item index="4">
                    <i class="el-icon-stopwatch"></i>
                    <span slot="title">表格填空</span>
                </el-menu-item>
            </el-menu>
        </el-aside>



        <el-main>
            <h1>问卷描述</h1>
            <el-input v-model="description" placeholder="请输入内容"> </el-input>
            <br>  <br>
            <el-button type="primary" plain @click="bt">创建问题</el-button>
        </el-main>

        <el-container>
            <el-header style="text-align: right; font-size: 12px">
                <el-button type="text" @click="dialogVisible = true">点击上传文件批量创建问题</el-button>

                <el-dialog
                        title=""
                        :visible.sync="dialogVisible"
                        width="30%"
                        :before-close="handleClose">
                    <h1>文件上传</h1>
                    <span slot="footer" class="dialog-footer">
                        <el-upload
                                class="upload-demo"
                                drag
                                action="http://localhost:8080/question/file"
                                multiple
                                :before-upload="beforeUpload">
                          <i class="el-icon-upload"></i>
                          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                          <div class="el-upload__tip" slot="tip">只能上传csv文件，且不超过500kb</div>
                        </el-upload>
                    <el-button type="primary" @click="dialogVisible = false">返 回</el-button>
                  </span>
                </el-dialog>
            </el-header>
        </el-container>
    </el-container>
</div>
<script type="text/javascript">
    let vm = new Vue({
        el: "#app",
        data: {
            description:"",
            type:1,
            dialogVisible: false,
            activeIndex: '1'
        },
        methods: {
            bt() {
                if (this.description == "") {
                    alert("描述不能为空")
                }
                let data = {"description": this.description, "type": this.type}
                axios.post('http://localhost:8080/question', data
                ).then(res => {
                    console.log(res.data)
                    if (res.data.code == "200") {
                        alert("创建成功")
                    } else if (res.data.code == "300") {
                        alert("当前未登录")
                    } else if (res.data.code == "10001") {
                        alert("系统错误")
                    }
                })
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            beforeUpload(file) {
                if ('text/csv' != file.type) {
                    this.$message.error('只能上传csv文件哦!');
                    return false;
                }
                if (file.size / 1024 > 500) {
                    this.$message.error('上传的文件大小不能超过500kb!');
                    return false;
                }
            },
            getIndex(e) {
                this.type = e
            }
        }
    })
</script>
</body>
</html>